<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        a.active2{
            color: red;
            font-weight: bold;
        }
        .container{
            width: 1200px;
            height: 600px;
            border: 1px solid red;
            margin: 20px auto;
        }

        .nav{
            width: 1200px;
            margin: 20px auto;
        }

        .row{
            display: flex;
        }

        .row .item{
            width: 25%;
            height: 200px;
            margin: 10px;
        }

        .row .item .img{
            height: 140px;
            background-color: #f1f1f1;
        }

        .row .item p{
            text-align: center;
        }

        .video-title{
            text-align: center;
            line-height: 30px;
            font-weight: bold;
            color: #666;
        }

        .video-player{
            width: 800px;
            height: 480px;
            margin: 20px auto;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
       <div class="nav">
        <router-link to="/">首页</router-link>
        <router-link to="/video">视频</router-link>
        <router-link to="/music">音乐</router-link>
       </div>

        <!-- 5.设置一个路由展示容器  -->
        <router-view class="container"></router-view>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/vue-router.js"></script>
    <script>
        //1.先为路由页面创建组件
        const Home = {
            template:`<div>这是首页</div>`
        }

        //视频分类的子组件
        const VideoGx = {
            data(){
                return {
                    videoList:[
                        {
                            id:20200807001,
                            title:"独播剑破龙门·见龙卸甲"
                        },
                        {
                            id:20200807002,
                            title:"大唐帝陵🔥宫廷惨案"
                        },
                        {
                            id:20200807003,
                            title:"什刹海·舌尖上的北京"
                        },
                        {
                            id:20200807004,
                            title:"刘佩琦坐镇京味家庭大剧"
                        }
                    ]
                }
            },
            template:`<div class="row">
                    <div class="item" v-for="(item , index) in videoList">
                        <router-link :to="'/video/play/'+item.id">
                            <div class="img">{{item.id}}</div>
                        <p>{{item.title}}</p>
                        </router-link>
                    </div>
                </div>`
        }

        // 视频播放页组件
        const VideoPlay = {
            created(){
                console.log('当前是播放页!!',this.$route.params.id);
            },
            template:`
                <div class="video">
                    <div class="video-title">当前播放视频id:{{$route.params.id}}</div>
                    <div class="video-player">这是视频播放页!!!</div>
                </div>
                  `
        }

        const Video = {
            template:`
            <div>
                <router-link to="/video/gx">搞笑视频</router-link>
                <router-link to="/video/zy">综艺</router-link>
                <router-link to="/video/ty">体育</router-link>
                <hr/>
                <router-view></router-view>
            </div>`
        }   

          //音乐分类的子组件
          const MusicPop = {
            data(){
                return {
                    videoList:[
                        {
                            id:100001,
                            title:"夜曲"
                        },
                        {
                            id:100002,
                            title:"听妈妈的话"
                        },
                        {
                            id:100003,
                            title:"超人不会飞"
                        },
                        {
                            id:100004,
                            title:"给我一首歌的时间"
                        }
                    ]
                }
            },
            template:`<div class="row">
                    <div class="item" v-for="(item , index) in videoList">
                        <div class="img">{{item.id}}</div>
                        <p>{{item.title}}</p>
                    </div>
                </div>`
        }
        const Music = {
            template:`
            <div>
                <router-link to="/music/pop">流行音乐</router-link>
                <router-link to="/music/rock">摇滚</router-link>
                <router-link to="/music/rap">rap</router-link>
                <hr/>
                <router-view></router-view>
            </div>`
        }      

        //2.创建路由表 (进行访问地址和组件的关联关系的表(映射))
        const routes = [
            {
                path:"/",
                component:Home
            },
            {
                path:"/video",
                component:Video,
                redirect:'/video/gx', //配置路由重定向到指定的子路由
                children:[//配置子路由(嵌套路由)
                    {
                        path:'gx',//添加/ 表示根路径 , 没有/ 则以父路由为基础路由地址
                        component:VideoGx
                    },
                    {
                        path:'zy',//添加/ 表示根路径 , 没有/ 则以父路由为基础路由地址
                        component:VideoGx
                    },{
                        path:'ty',//添加/ 表示根路径 , 没有/ 则以父路由为基础路由地址
                        component:VideoGx
                    },
                    {
                        path:"play/:id",//1.表示在/play/123456  , 其中123456就是路由的id参数
                        component:VideoPlay
                    }
                ]
            },
            {
                path:"/music",
                component:Music,
                children:[
                    {
                        path:'pop',
                        component:MusicPop
                    },
                    {
                        path:'rock',
                        component:MusicPop
                    },
                    {
                        path:'rap',
                        component:MusicPop
                    }
                ]
            },{
                path:"order-*", // order-a
                redirect:"/"
            },
            {
                path:"*" , //按照路由从上往下解析的规则,如果前面的路由匹配不到,则通配符指定其他所有地址
                redirect:"/" ,//重定向
            }
        ];

        //3.创建vue 路由对象
        const router = new VueRouter({
            mode:"hash", //设置使用路由的模式 : hash(默认) / history / abstract (node.js环境中) 
            routes,// 配置当前路由实例的路由表
            fallback:true, //当浏览器不支持 history 模式控制路由是否应该回退到 hash 模式
            // base:'/cart',// 添加路由基路径
            linkActiveClass:"active", //全局配置 <router-link> 默认的激活的 class  ,默认 :router-link-active
            linkExactActiveClass:'active2',//全局配置 <router-link> 默认的精确激活的 class
            // scrollBehavior  // 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样

        })

        //vm 就是根组件
        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据

            },
            router,// 4. 将vue路由对象挂载到对应的vue实例对象
            methods:{//当前Vue实例中使用到的方法

            }
        })

    </script>
</body>
</html>